import 'package:flutter/material.dart';

class ExamResultStyleWidget extends StatelessWidget {
  final Widget child;
  const ExamResultStyleWidget({Key key, @required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: 220,
          child: background(),
        ),
        Positioned(
          top: 10,
          left: 10,
          right: 10,
          child: outputStyleBox(),
        ),
        Positioned(
          top: 20,
          left: 20,
          right: 20,
          child: Container(
            color: Colors.white,
            alignment: Alignment.center,
            child: Column(
              children: [
                gradientBox(context),
                child,
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget background() {
    return Column(
      children: [
        Container(
          height: 100,
          decoration: BoxDecoration(color: Color.fromRGBO(64, 153, 255, 1)),
          alignment: Alignment.topCenter,
        ),
        Expanded(
          child: Container(
            decoration: BoxDecoration(color: Color.fromRGBO(240, 240, 240, 1)),
            alignment: Alignment.topCenter,
          ),
        ),
      ],
    );
  }

  Widget gradientBox(BuildContext context) {
    return Container(
      height: 10,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color.fromRGBO(51, 146, 255, 0.9),
            Color.fromRGBO(250, 250, 250, 0.2),
          ],
        ),
      ),
    );
  }

  Widget outputStyleBox() {
    return Container(
      height: 20,
      decoration: BoxDecoration(
        color: Color.fromRGBO(63, 146, 241, 1),
        borderRadius: BorderRadius.circular(10),
        border: Border.all(
          color: Color.fromRGBO(0, 0, 0, 0.05),
          width: 1,
        ),
      ),
    );
  }
}
